<template>
  <div>
    <div class="chapter-banner">
      <img :src="obc.cover">
    </div>
    <div class="title-ones">
      {{obc.title}}
    </div>
    <section class="huitiao">

    </section>
    <tab
      :line-width="2"
      custom-bar-width="30px"
    >
      <tab-item
        @on-item-click="xuan=0"
        selected
      >课程介绍</tab-item>
      <!-- v-if="books_status==='0'" -->
      <tab-item @on-item-click="xuan=1">用户评价 </tab-item>
      <!-- <span style="color:#f29911;font-family: PingFangSC-Medium;">{{data_count}}</span> -->
    </tab>
    <div v-if="xuan===0">
      <section
        v-html="obc.introduction"
        class="html-sc"
      ></section>
    </div>
    <div v-if="xuan===1" class="pinglun">
      <div
        v-if="!pinglun_status"
        class="sp_pl_kong"
      >
        <img
          src="https://o6wndwjxn.qnssl.com/%E7%BB%843@2x.png"
          alt
        >
        <div>您的评价就是对我最大的支持~</div>
      </div>
      <div
        v-else
        class="sp_pl_score"
      >
        <div class="sp_score_l">
          <div>{{sp_evaluate}}分</div>
          <div>
            <img
              :src="sp_evaluate_img"
              alt
            >
          </div>
          <div>{{sp_evaluate_text}}</div>
        </div>
        <div class="sp_score_r">
          <div>
            讲师专业
            <span class="sp_score_span">
              <span :style="'width:'+ sp_score[0] +'%;'"></span>
            </span>
          </div>
          <div>
            方法有效
            <span class="sp_score_span">
              <span :style="'width:'+ sp_score[1] +'%;'"></span>
            </span>
          </div>
          <div>
            逻辑清晰
            <span class="sp_score_span">
              <span :style="'width:'+ sp_score[2] +'%;'"></span>
            </span>
          </div>
          <div>
            声音画质
            <span class="sp_score_span">
              <span :style="'width:'+ sp_score[3] +'%;'"></span>
            </span>
          </div>
          <div>
            课程服务
            <span class="sp_score_span">
              <span :style="'width:'+ sp_score[4] +'%;'"></span>
            </span>
          </div>
        </div>
      </div>
      <div class="sp_pl_list">
        <div
          class="sp_pl_item"
          v-for="(item,index) in sp_pl_list"
          :key="index"
        >
          <div class="sp_item_one">
            <div>
              <img
                :src="item.cover"
                alt
              >
            </div>
            <div>{{item.nick_name}}</div>
            <div>{{item.create_time}}</div>
          </div>
          <div class="sp_item_two">
            {{item.sp_evaluate_text_two}}
            <img
              :src="item.sp_evaluate_img_two"
              alt
            >
          </div>
          <div class="sp_item_the">{{item.content}}</div>
        </div>
      </div>
    </div>
    <div
      class="btn"
    >
      <div class="goumai">
        <div @click="co_payment(1)">
          单次课{{obc.preferential_money / 100}}元
        </div>
        <div @click="goumaiall">
          系列课购买
          <!-- {{curriculum.preferential_money / 100}}元 -->
          <!-- <span style="text-decoration:line-through;color: #CCCCCC;font-size: 12px;"></span> -->
        </div>
      </div>
    </div>
        <!-- 购买提示 -->
    <div class="purchase_Popup" v-show="purchase_Popup" @click.self="purchase_Popup_close">
      <div class="purchase_Popup_box">
        <div class="purchase_Popup_title">付费详情</div>
        <div class="purchase_Popup_content">
          <!-- 原价 -->
          <div class="purchase_Popup_item">
            <div>课程原价</div>
            <div><span class="pu_yuan_money">¥{{curriculum.money / 100}}</span></div>
          </div>
          <!-- 优惠价 -->
          <div class="purchase_Popup_item">
            <div>课程现价</div>
            <div>¥{{curriculum.preferential_money / 100}}</div>
          </div>
          <!-- 优惠券 -->
          <div class="purchase_Popup_item" v-if="is_type !== '0'">
            <div>优惠券</div>
            <div v-if="coupons">-¥{{coupons.discount / 100}}</div>
          </div>
        </div>
        <div class="purchase_Popup_button" @click="co_payment(2)">
          <div>立即付款
            <span  v-if="coupons">¥{{ (curriculum.preferential_money  - coupons.discount)  / 100}}</span>
            <span v-else>¥{{ (curriculum.preferential_money)  / 100}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  by_curriculum
} from '@/api/coursedetails'
import {
  comments_show
} from '@/api/coursedetails'
import {
  Tab,
  TabItem
} from 'vux'
import {
  mapState
} from 'vuex'
import {
  danchapterList
} from '@/api/coursedetails'
export default {
  components: {
    Tab,
    TabItem
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      coupons: '',
      is_type: '',
      purchase_Popup: false,
      obc: {},
      xuan: 0,
      // 评分
      curriculum: '',
      heightCss: 0,
      sp_score: [80, 20, 10, 50, 70],
      pinglun_status: false,
      sp_evaluate: 0,
      sp_evaluate_text: '',
      sp_evaluate_img: 'https://o6wndwjxn.qnssl.com/The%20five-star.svg',
      sp_evaluate_text_two: '',
      sp_evaluate_img_two: '',
      sp_evaluate_imgarr: [
        'https://o6wndwjxn.qnssl.com/Nostar.svg', // 0
        'https://o6wndwjxn.qnssl.com/Half%20a%20star.svg', // 0.5
        'https://o6wndwjxn.qnssl.com/After%20a%20week.svg', // 1
        'https://o6wndwjxn.qnssl.com/Ban%20after%20a%20week.svg', // 1.5
        'https://o6wndwjxn.qnssl.com/Two%20star.svg', // 2
        'https://o6wndwjxn.qnssl.com/Two%20and%20a%20half.svg', // 2.5
        'https://o6wndwjxn.qnssl.com/samsung.svg', // 3
        'https://o6wndwjxn.qnssl.com/Samsung%20and%20a%20half.svg', // 3.5
        'https://o6wndwjxn.qnssl.com/A%20four-star.svg', // 4
        'https://o6wndwjxn.qnssl.com/Four%20and%20a%20half.svg', // 4.5
        'https://o6wndwjxn.qnssl.com/The%20five-star.svg' // 5
      ],
      co_sco_ping_arr: [
        '大失所望',
        '比较一般',
        '还算不错',
        '非常满意',
        '物超所值'
      ],
      sp_pl_list: []
    }
  },
  methods: {
    co_payment (stats) {
      this.purchase_Popup = false
      // 判断上级id 没有返回0
      var that = this
      let params = {
        app_id: that.app_id,
        user_id: that.user_id,
        curriculum_id: this.$route.query.curriculum_id,
        url_id: 0,
        chapter_id: stats === 1 ? this.$route.query.chapter_id : ''
      }
      // console.log('发送', params)
      by_curriculum(params).then(res => {
        let { code, data, msg } = res.data
        // console.log('接口返回数据', data)
        if (code === 200) {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
              appId: data.appId, // 公众号名称，由商户传入
              timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
              nonceStr: data.nonceStr, // 随机串
              package: data.package,
              signType: data.signType, // 微信签名方式：
              paySign: data.paySign // 微信签名
            },
            function (res) {
              // console.log('res', res)
              if (res.err_msg == 'get_brand_wcpay_request:ok') {
                that.purchase_Popup = false
                that.is_sin = 1
                that.xiangqing()
              }
            }
          )
        }
      })
    },
    purchase_Popup_close () {
      this.purchase_Popup = false
    },
    goumaiall () {
      this.purchase_Popup = true
    },
    getxiangqing () {
      let requery = {
        user_id: this.user_id,
        curriculum_id: this.$route.query.curriculum_id,
        chapter_id: this.$route.query.chapter_id
      }
      danchapterList(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data, msg } = res.data
        if (code === 200) {
          this.obc = data.data
          this.curriculum = data.curriculum
          this.is_type = data.is_type
          this.coupons = data.coupons
          console.log(this.obc)
          this.getComments_show()
        } else {
          alert(msg)
        }
        console.log(res.data)
      })
    },
    getComments_show () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.$route.query.curriculum_id
      }
      comments_show(requery).then(res => {
        let { code, data } = res.data
        console.log('评论展示', data)

        if (code == 200) {
          this.pinglun_status = true
          if (data.fen == '') {
            this.sp_pl_list = []
            this.pinglun_status = false
            this.data_count = 0
            return
          }
          var arr = [
            parseInt((data.fen.degree1 / 5) * 100),
            parseInt((data.fen.degree2 / 5) * 100),
            parseInt((data.fen.degree3 / 5) * 100),
            parseInt((data.fen.degree4 / 5) * 100),
            parseInt((data.fen.degree5 / 5) * 100)
          ]
          this.sp_score = arr
          if (data.fen.score < 1) {
            this.sp_evaluate = 0.5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[1]
            this.sp_evaluate_text = this.co_sco_ping_arr[0]
          } else if (data.fen.score >= 1 && data.fen.score < 1.5) {
            this.sp_evaluate = 1
            this.sp_evaluate_img = this.sp_evaluate_imgarr[2]
            this.sp_evaluate_text = this.co_sco_ping_arr[0]
          } else if (data.fen.score >= 1.5 && data.fen.score < 2) {
            this.sp_evaluate = 1.5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[3]
            this.sp_evaluate_text = this.co_sco_ping_arr[1]
          } else if (data.fen.score >= 2 && data.fen.score < 2.5) {
            this.sp_evaluate = 2
            this.sp_evaluate_img = this.sp_evaluate_imgarr[4]
            this.sp_evaluate_text = this.co_sco_ping_arr[1]
          } else if (data.fen.score >= 2.5 && data.fen.score < 3) {
            this.sp_evaluate = 2.5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[5]
            this.sp_evaluate_text = this.co_sco_ping_arr[2]
          } else if (data.fen.score >= 3 && data.fen.score < 3.5) {
            this.sp_evaluate = 3
            this.sp_evaluate_img = this.sp_evaluate_imgarr[6]
            this.sp_evaluate_text = this.co_sco_ping_arr[2]
          } else if (data.fen.score >= 3.5 && data.fen.score < 4) {
            this.sp_evaluate = 3.5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[7]
            this.sp_evaluate_text = this.co_sco_ping_arr[3]
          } else if (data.fen.score >= 4 && data.fen.score < 4.5) {
            this.sp_evaluate = 4
            this.sp_evaluate_img = this.sp_evaluate_imgarr[8]
            this.sp_evaluate_text = this.co_sco_ping_arr[3]
          } else if (data.fen.score >= 4.5 && data.fen.score < 5) {
            this.sp_evaluate = 4.5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[9]
            this.sp_evaluate_text = this.co_sco_ping_arr[4]
          } else {
            this.sp_evaluate = 5
            this.sp_evaluate_img = this.sp_evaluate_imgarr[10]
            console.log(this.co_sco_ping_arr)
            this.sp_evaluate_text = this.co_sco_ping_arr[4]
          }

          for (var i = 0; i < data.data.length; i++) {
            if (data.data[i].score == 1) {
              data.data[i].sp_evaluate_text_two = this.co_sco_ping_arr[0]
              data.data[i].sp_evaluate_img_two = this.sp_evaluate_imgarr[2]
            } else if (data.data[i].score == 2) {
              data.data[i].sp_evaluate_text_two = this.co_sco_ping_arr[1]
              data.data[i].sp_evaluate_img_two = this.sp_evaluate_imgarr[4]
            } else if (data.data[i].score == 3) {
              data.data[i].sp_evaluate_text_two = this.co_sco_ping_arr[2]
              data.data[i].sp_evaluate_img_two = this.sp_evaluate_imgarr[6]
            } else if (data.data[i].score == 4) {
              data.data[i].sp_evaluate_text_two = this.co_sco_ping_arr[3]
              data.data[i].sp_evaluate_img_two = this.sp_evaluate_imgarr[8]
            } else if (data.data[i].score == 5) {
              data.data[i].sp_evaluate_text_two = this.co_sco_ping_arr[4]
              data.data[i].sp_evaluate_img_two = this.sp_evaluate_imgarr[10]
            }
          }
          this.data_count = data.data_count
          this.sp_pl_list = data.data
        }
      })
    }
  },
  created () {
    this.getxiangqing()
  }
}
</script>

<style scoped>
.goumai{
  width: 100%;
  display: flex;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  justify-content: space-evenly;
}
.goumai>div{
  width: 45%;
  text-align: center;
  height: 100%;
  border-radius: 500px;
  text-align: center;
}
.goumai>div:last-of-type{
  background-color: #DA4131;
  color: #fff;
}
.goumai>div:first-of-type{
  border: solid 1px #DA4131;
  color: #DA4131;
}
.chapter-banner {
  width: 100%;
  height: 230px;
}
.chapter-banner > img {
  width: 100%;
  height: 100%;
}
.title-ones {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  padding: 15px 15px 10px 15px;
}
.huitiao {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
}
.html-sc {
  width: 90%;
  margin: 10px 5%;
  font-size: 14px;
  overflow: hidden;
}
.suotou {
  width: calc(100vw * 80 / 750);
  height: calc(100vw * 40 / 750);
  margin-right: calc(100vw * 20 / 750);
  text-align: center;
}
.suotou > img {
  height: calc(100vw * 41 / 750);
  width: calc(100vw * 42 / 750);
}
.zuil {
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #333333;
  letter-spacing: 0;
  height: 100%;
  flex: 1;
}
.cour_button_arr {
  width: 45px;
  height: 45px;
  background-image: url(http://o6wndwjxn.qnssl.com/e7121201903051841447357.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: fixed;
  z-index: 990;
  right: 13px;
  top: 85%;
}
.openg {
  width: 100%;
  position: fixed;
  height: calc(100vw * 345 / 750);
  bottom: 0;
  z-index: 200;
  box-sizing: border-box;
  padding-top: calc(100vw * 40 / 750);
  background: #f5f5f5;
  border-radius: 4px 4px 0px 0px;
}
.create_time {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #999999;
  letter-spacing: 0;
  position: absolute;
  bottom: 0;
}
.big-openg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
.icons-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  div {
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
  }
}
.boradi {
  width: calc(100vw * 120 / 750);
  height: calc(100vw * 120 / 750);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 17px;
}
.st0 {
  fill: #666666;
}

.st1 {
  fill: #ff0000;
}
.close {
  width: 100%;
  height: calc(100vw * 100 / 750);
  background-color: #fff;
  line-height: calc(100vw * 100 / 750);
  text-align: center;
  color: #1a1a1a;
  font-size: 17px;
  position: absolute;
  bottom: 0;
}

.sp_pl_kong {
  overflow: hidden;
}
.sp_pl_kong > img {
  width: 60%;
  margin: 15px 10% 0 30%;
}
.sp_pl_kong > div {
  font-size: 15px;
  color: #666666;
  text-align: center;
}

.purchase_Popup {
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}
.purchase_Popup_box {
  width: 100vw;
  height: 60vh;
  position: absolute;
  left: 0;
  bottom: 0;
  background: white;
  border-radius: 10px 10px 0 0;
}
.purchase_Popup_title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #1a1a1a;
  text-align: center;
  font-weight: bold;
}
.purchase_Popup_item {
  width: 90vw;
  margin: 0 5vw;
  height: 35px;
  line-height: 35px;
  display: flex;
}
.purchase_Popup_item > div {
  flex: 1;
  color: #fd5e5e;
  font-size: 15px;
}
.purchase_Popup_item > div:nth-child(1) {
  color: #1a1a1a;
}
.purchase_Popup_item > div:nth-child(2) {
  text-align: right;
}

.purchase_Popup_item:nth-child(1) > div:nth-child(2) {
  color: #999999;
}
.purchase_Popup_button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
}
.purchase_Popup_button > div {
  width: 90%;
  margin: 5px 5%;
  height: 40px;
  line-height: 40px;
  background: #f29911;
  color: white;
  text-align: center;
  border-radius: 500px;
  font-size: 15px;
}
.purchase_Popup_button > div span {
  font-size: 12px;
}
.pu_yuan_money {
  position: relative;
  display: inline-block;
}
.pu_yuan_money:after {
  position: absolute;
  content: "";
  left: -10%;
  top: 49%;
  width: 120%;
  height: 1px;
  z-index: 1;
  background: #999999;
}

.assembly_tips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 500;
}
.co_lea_close {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  color: #999999;
}
.co_Scoring_a {
  width: 100%;
  display: flex;
  height: 90px;
}
.co_sco_xing {
  flex: 2;
  height: 60px;
  margin: 15px 0;
}
.co_sco_xing > div:nth-child(1) {
  height: 35px;
}
.co_sco_xing > div:nth-child(2) {
  font-size: 15px;
  height: 25px;
  line-height: 25px;
  font-size: 15px;
}
.co_sco_xing_fen {
  color: #ff9300;
}
.co_sco_xing_pin {
  color: #9f9f9f;
}
.co_sco_xing_img > img {
  height: 25px;
  margin-top: 10px;
  margin-right: 5px;
  display: inline-block;
}
.co_sco_sub_a {
  flex: 1;
  position: relative;
}
.co_sco_sub_a > span {
  position: absolute;
  right: 0;
  top: 27px;
  display: block;
  border-radius: 500px;
  width: 80%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 15px;
}
.co_sco_sub_btn_true {
  color: #999999;
  background: #eeeeee;
}
.co_sco_sub_btn_false {
  background: #f29911;
  color: white;
}
.co_Leaving_a {
  width: 100%;
  height: 130px;
  background: #f7f7f7;
  position: relative;
  margin-bottom: 20px;
}
.co_Leaving_a > textarea {
  border: none;
  background: none;
  outline: none;
  resize: none;
  width: calc(100% - 20px);
  margin-left: 10px;
  height: calc(100% - 40px);
  margin-top: 10px;
  font-size: 14px;
  color: #333333;
}
.co_lea_number {
  font-size: 12px;
  color: #8b8b8b;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.comment_box_name {
  font-size: 15px;
  color: #666666;
  font-weight: bold;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}
.comment_box_title {
  height: 57px;
  line-height: 57px;
  font-size: 18px;
  color: #1a1a1a;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #eeeeee;
}
.comment_box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: white;
  padding: 0 5%;
  border-radius: 10px 10px 0 0;
}
.Comment_wai {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.sp_zero_list {
  width: 90%;
  margin: 0 5%;
}

.sp_zero_tea {
  width: 90%;
  height: 76px;
  // border-top: 1px solid #eeeeee;
  // border-bottom: 1px solid #eeeeee;
  margin: 0px 5%;
  display: flex;
}

.sp_zero_tea > div:nth-child(1) {
  width: 66px;
}

.sp_zero_tea > div:nth-child(1) img {
  width: 50px;
  height: 50px;
  margin: 12px 5px;
  border-radius: 50%;
}

.sp_zero_tea > div:nth-child(2) {
  flex: 2;
}

.sp_zero_tea > div:nth-child(3) {
  flex: 1;
}

.sp_bt_title_tip {
  line-height: 40px !important;
}

.sp_bigbox {
  position: relative;
}

.sp_share_box {
  position: fixed;
  right: 0;
  padding: 0 10px 0 5px;
  height: 30px;
  background: rgba(242, 153, 17, 0.6);
  z-index: 500;
  color: white;
  font-size: 13px;
  border-radius: 50px 0 0 50px;
  line-height: 30px;
  text-indent: 30px;
  transition: all 0.5s;
  box-shadow: 0px 0px 2px rgba(242, 153, 17, 0.6);
}
.sp_share_box > div img {
  position: absolute;
  left: 7px;
  top: 5px;
  width: 20px;
  height: 20px;
}

.sp_pl_score {
  display: flex;
  height: 100px;
}

.sp_pl_score > div:first-child {
  flex: 2;
  border-right: 1px solid #eeeeee;
}

.sp_pl_score > div:last-child {
  flex: 3;
}

.pinglun {
  margin: 20px 5%;
  width: 90%;
}

.sp_score_l {
  text-align: center;
}

.sp_score_l > div:nth-child(1) {
  font-size: 24px;
  color: #ff9300;
  margin-top: 6px;
}

.sp_score_l > div:nth-child(2) {
  width: 100%;
  height: 15px;
  margin: 10px 0;
}

.sp_score_l > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}

.sp_score_l > div:nth-child(3) {
  font-size: 14px;
  color: #1a1a1a;
}

.sp_score_r > div {
  font-size: 12px;
  color: #999999;
  text-indent: 25px;
  margin: 3px 0;
  position: relative;
}

.sp_score_span {
  position: absolute;
  left: 45%;
  top: 6px;
  display: inline-block;
  width: 55%;
  height: 5px;
  background: #eeeeee;
  border-radius: 50px;
  overflow: hidden;
}

.sp_score_span > span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #ff9300;
  border-radius: 50px;
}

.vux-tab-selected {
  font-weight: bold;
}

.sp_pl_item {
  background: #f7f7f7;
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
}

.sp_item_one {
  display: flex;
  height: 45px;
  line-height: 45px;
}

.sp_item_one > div:nth-child(1) {
  width: 55px;
}

.sp_item_one > div:nth-child(1) img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

.sp_item_one > div:nth-child(2) {
  flex: 2;
  font-size: 14px;
  color: #666666;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.sp_item_one > div:nth-child(3) {
  flex: 1;
  font-size: 12px;
  color: #999999;
  text-align: right;
}

.sp_item_two {
  height: 30px;
  line-height: 30px;
  margin: 10px 0;
  color: #ff9300;
  font-size: 12px;
  position: relative;
}

.sp_item_two > img {
  position: absolute;
  left: 50px;
  top: 7px;
  height: 16px;
  width: 50%;
}

.sp_item_the {
  font-size: 14px;
  color: #1a1a1a;
  padding-bottom: 10px;
}

.vux-tab .vux-tab-item {
  font-size: 15px;
}

.header1 {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}

.video_gg {
  font-weight: 100;
  position: absolute;
  top: -37px;
  background: rgba(35, 34, 34, 0.8);
  left: 0;
  height: 37px;
  line-height: 37px;
  width: 100%;
  color: white;
  font-size: 14px;
  text-align: left;
  text-indent: 10px;
}

.video_image {
  height: 30px;
  background: rgba(35, 34, 34, 0.8);
  // background: yellow;
  position: absolute;
  right: 15px;
  top: -200px;
  color: white;
  border-radius: 50px;
}

.video_image > img {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 15px;
  height: 15px;
}

.video_image > span {
  transform-origin: 40% 0;
  display: block;
  height: 30px;
  line-height: 30px;
  text-indent: 35px;
  font-size: 12px;
  overflow: hidden;
}

.vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  margin-left: -8%;
  margin-top: -10%;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  line-height: 55px !important;
}
.vjs-big-play-button .vjs-icon-placeholder {
  font-size: 1.63em;
}

.vjs-loading-spinner {
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  margin-top: -1em;
  margin-left: -1.5em;
}

.video-js.vjs-playing .vjs-tech {
  pointer-events: auto !important;
}

.video-js .vjs-time-control {
  display: block;
}

.video-js .vjs-remaining-time {
  display: none;
}

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}

.currency_title_Label {
  width: 90%;
  margin: 10px 5%;
  position: relative;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  color: #1a1a1a;
  font-weight: bold;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 14px;
  color: white;
  background: white;
  padding-top: 5px;
  border-radius: 5px 5px 0 0;
}
</style>
